<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center">
		<view class="navBar w-full pl-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
				宗祠志
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>
		<view class="page-top-bg w-full z-0"></view>

		<view class="content flex flex-col align-items-center mt-40">
			<view class="w-610 h-360 radius-24 bg-danger mt-60 overflow-hidden">
				<video :src="detail.promotionalVideo" :poster="VideoPost" class="w-full h-full"></video>
			</view>

			<view
				class="w-610 flex justif-between align-items-center pt-20 pb-20 pl-24 pr-24 radius-24 bg-FDF5E8 mt-40">
				<image :src="detail.vrCoverImage" class="ar-img radius-16"></image>
				<view class="f-32 text-bold text-581403 flex align-items-center">
					<image src="/src/static/icon-12.png" class="w-32 h-32 mr-10"></image>
					<text>AR展示</text>
				</view>
				<view class="sound flex-center text-581403 f-24 mr-20"
					@click="$toPage('/pages/ancestral-hall-record/vr')">
					立即查看
				</view>
			</view>

			<view class="w-690 mt-20 p-40">
				<view class="flex justify-end align-items-center">
					<view class="sound flex-center text-581403 f-24 mr-20" @click="playAudio">
						<image src="/src/static/icon-11.png" class="w-28 h-28 mr-6"></image>
						朗读
					</view>
				</view>
				<view class="mt-30 rich" v-html="detail.content"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onUnload } from '@dcloudio/uni-app';
	import { onHide } from '@dcloudio/uni-app';
	const { api_get_ancestralHall } = useRequest();
	import VideoPost from '@/static/video-post.jpg'

	const detail = ref({})

	const loadDetail = () => {
		api_get_ancestralHall().then(res => {
			detail.value = res
			initAudio()
		})
	}


	// 播放控制
	const isPlaying = ref(false)
	const innerAudioContext = ref(null)

	function initAudio() {
		// 创建音频实例
		innerAudioContext.value = uni.createInnerAudioContext();
		// 设置音频源（支持本地和网络路径）
		innerAudioContext.value.src = detail.value.audioPath;
		// 监听播放事件
		innerAudioContext.value.onPlay(() => {
			isPlaying.value = true
			console.log('开始播放')
		})

		// 监听暂停事件
		innerAudioContext.value.onPause(() => {
			isPlaying.value = false
			console.log('已暂停')
		})
	}

	function playAudio() {
		if (!innerAudioContext.value) return
		isPlaying.value ? innerAudioContext.value.pause() : innerAudioContext.value.play()
	}

	onMounted(() => {
		loadDetail()
	})

	onUnload(() => {
		innerAudioContext.value.pause()
	})

	onHide(() => {
		innerAudioContext.value?.destroy();
	})
</script>

<style lang="scss" scoped>
	.page-top-bg {
		position: fixed;
		top: 0;
		height: 600rpx;
		background-image: url('/src/static/bg-05.png');
		background-size: 100% 100%;
	}

	.content {
		// height: calc(100vh - 120rpx);
		height: 1338rpx;
		background-image: url('/src/static/bg-06.png');
		background-size: 100%;
		background-repeat: no-repeat;

		.sound {
			width: 128rpx;
			height: 56rpx;
			background-image: url('/src/static/bg-07.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.rich {
			width: 610rpx;
			height: 500rpx;
			overflow-y: auto;
		}

		.ar-img {
			width: 184rpx;
			height: 108rpx;
		}
	}
</style>